{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body style='background-image: url("{% static 'images/bg.jpg' %}");background-repeat: no-repeat;background-size: 100%'>
<div class="container" style='margin-top:76px;margin-left: 15%;'>
    <div class="col-md-11">
        <div class="panel panel-warning">
            <div class="panel-heading form-inline" style="font-size: 17px;">
                <h3 class="panel-title"><a href="{% url 'home' username %}"><span class="glyphicon glyphicon-home"></span>&nbsp;返回首页</a>
                    <span class="glyphicon glyphicon-map-marker" style="margin-left: 50px"></span>&nbsp;个人中心</h3>
            </div>
            <div class="panel-body">
                <form role="form" method="post" action="/modifyuser/" enctype="multipart/form-data">
                {% csrf_token %}
                    <fieldset>
                        <div class="form-group form-inline"  style="font-size: 17px;">
                            <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称 <span class="label label-primary">{{ username }}</span></label>
                            <input id="input_name" class="form-control" placeholder="请输入要修改的昵称" name="name" type="text" pattern="^[\u4e00-\u9fa5]{2,7}$|^[\dA-Za-z_]{2,14}$" title="用户名2~7个汉字或2~14字符"
                                   autofocus value="">

                            <label style="margin-left: 30px" for="input_pwd"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码 <span class="label label-danger">{{ password }}</span></label>
                            <input id="input_pwd" class="form-control" placeholder="输入要修改的密码" name="pwd" type="text" pattern="^[a-zA-Z]\w{5,17}$" title="字母开头，长度在6~18之间，只能包含字母、数字和下划线"
                                   autofocus>
                        </div>
                        <div class="form-group"  style="font-size: 17px;">
                                <label for="input_face"><span class="glyphicon glyphicon-picture"></span>&nbsp;头像</label>
                                {% load filters %}
                                <img style="width: 200px;" src="{{ request.build_absolute_uri|get_url }}{{ img_head }}" class="img-responsive img-rounded" id="img_face" alt="">
                                <input id="input_face" class="form-control" name="face" type="file" autofocus>
                        </div>
                        <div class="form-group"  style="font-size: 12px;">
                            <label for="input_comment"><span class="glyphicon glyphicon-comment"></span>&nbsp;已评论</label>
                            <ul class="list-group">
                                {% for i in com_list %}
                                    <li class="list-group-item">
                                    <span class="label label-info">电影名：《{{ i.1 }}》</span>
                                        <br>
                                        评论内容：{{ i.0 }}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <button type="submit" class="btn btn-lg btn-success btn-block" name="submit-btn" id="save_info" onclick="SaveInfo()">保存修改</button>
                    </fieldset>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
</div>
    <script type="text/javascript">
        $(document).ready(function() {
            var obj = document.getElementById("input_face");//input file对象 必须用document.get

            $("#input_face").change(function () {

                $("#img_face").attr("src", getObjectURL(obj));//将图片的src变为获取到的路径

            })
            function getObjectURL(node) {
                var imgURL = "";
                try {
                    var file = null;
                    if (node.files && node.files[0]) {
                        file = node.files[0];
                    } else if (node.files && node.files.item(0)) {
                        file = node.files.item(0);
                    }
                    //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
                    try {
                        //Firefox7.0
                        imgURL = file.getAsDataURL();
                        //alert("//Firefox7.0"+imgRUL);
                    } catch (e) {
                        //Firefox8.0以上
                        imgURL = window.URL.createObjectURL(file);
                        //alert("//Firefox8.0以上"+imgRUL);
                    }
                } catch (e) {      //这里不知道怎么处理了，如果是遨游的话会报这个异常
                    //支持html5的浏览器,比如高版本的firefox、chrome、ie10
                    if (node.files && node.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            imgURL = e.target.result;
                        };
                        reader.readAsDataURL(node.files[0]);
                    }
                }
                return imgURL;
            }
        })

        function SaveInfo(){
            alert("修改成功！");
        }
    </script>
</body>
</html>